<template>
    <div class="shoppingcar">
         <div class="logo">
            <img src="../assets/logo.png" alt="">
            <div class="uplogin">
                <van-icon name="like-o" />
                <span>收藏</span>
            </div>

        </div>
        <div class="car">
            <div class="car-title">
                <div class="title">购物车</div>
                <div class="title-btn">编辑全部</div>
            </div>
            <div class="send">
                <input type="checkbox">
                <span>快递配送</span>
            </div>
            <div class="content">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <div class="item-title">
                        <input type="checkbox" v-model="item.ischecked" @change="ischange()">
                        <span>修改配送方式</span>
                    </div>
                    <div class="item-msg">
                        <img :src="item.goodsimg" alt="">
                        <div class="msg-info">
                            <p class="type">{{item.type}} {{item.goodsname}}</p>
                            <p class="size">尺码：{{item.size}}</p>
                            <p class="color">颜色：{{item.color}}</p>
                            <p class="tui">支持30天无理由退换货</p>
                            <p class="price">￥{{item.price*item.buynum}}</p>
                            <div class="operation">
                                <div class="opration-btn">
                                    <div class="reduce" v-if="item.buynum>1" @click="calc(item,-1)"><van-icon name="minus" /></div>
                                    <div class="reduce" v-else><van-icon name="minus" /></div>
                                    <input type="text" v-model="item.buynum">
                                    <div class="add" @click="calc(item,1)" v-if="item.buynum<=200"><van-icon name="plus" /></div>
                                    <div class="add" v-else><van-icon name="plus" /></div>
                                </div>
                                <div class="opration-del" @click="del(item.id)">删除</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 结算 -->
                <div class="cart">
                    <div class="checkall">
                        <input type="checkbox" :checked="checkedall" @change="changecheck">
                        <span >全选</span>
                    </div>
                    <div class="handle">
                       <p> 合计：<span>￥{{totalmoney.toFixed(2)}}</span>
                        <i>不含运费</i></p>
                        <div class="btn" @click="totalbtn">结算</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapActions} from "vuex"
import shoppingcarModel from "../model/shoppingcarModel"

import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
export default {
    computed:{
        ...mapState("shoppingcar",{
            list:state=>state.list
        }),
        // ...mapGetters("shoppingcar",["moneysum"])
    },
    watch:{
        list:{
            handler(){
                console.log(11);
            }
        }
    },
    data(){
        return {
            checkedall : false, 
            totalmoney:0
    }
    },
    methods:{
        ischange(){
           this.checkedall = this.list.every(item=>item.ischecked) 
                this.totalmoney = 0
              this.list.forEach(item=>{
                if(item.ischecked){
                    this.totalmoney += item.price*item.buynum
                }
            })
        },
        totalbtn(){
             this.$router.push("/order")
        },
        changecheck(){
            this.checkedall = !this.checkedall
            this.list = this.list.map(item=>{
                item.ischecked = this.checkedall
                return item
            })
            this.totalmoney = 0
              this.list.forEach(item=>{
                if(item.ischecked){
                    this.totalmoney += item.price*item.buynum
                }
            })
        },
        ...mapActions("shoppingcar",["asyncshoppingcar","asyncUpdateBuynum","asyncdelgoods"]),
        calc(item,num){
            
            // this.asyncUpdateBuynum(item.id,{buynum:item.buynum*1+num})
            shoppingcarModel.update(item.id,{buynum:item.buynum*1+num}).then(()=>{
                // console.log(res);
               item.buynum = item.buynum*1 + num
            })
        },
        del(id){
           this.asyncdelgoods(id)
           Toast.success('删除成功');
        }
        
    },
   
    created(){
        let userinfo = JSON.parse(window.localStorage.getItem("userinfo"))
        if(userinfo){
            this.asyncshoppingcar({userid:userinfo.id})
            // shoppingcarModel.query({userid:userinfo.id}).then(({data})=>{
            //     this.list = data
            //      this.list = this.list.map(item=>{
            //     item.ischecked = false
            //     return item
            // })
            // })     
        }else {
            this.$router.push("/mine")
        }
    }
}
</script>
<style lang="scss" scoped>
.shoppingcar {
    padding-bottom: 130px;
    .logo {
        width: 100%;
        height: 70px;
        background: #fff;
        text-align: left;
        padding: 0 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        img {
            width: 40px;
            height: 40px;
            margin-top: 15px;
        }
        .uplogin {
            width: 24px;
            height: 42px;
            font-size: 12px;
            color: #1b1b1b;
            font-weight: bold;
            text-align: center;
            margin-top: 14px;
            .van-icon-like-o{
                font-size: 20px;
                font-weight: bold;
                
            }
        }
    }
    .car {
        .car-title {
            width: 100%;
            height: 68px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            box-sizing: border-box;
        .title {
            font-size: 21px;
            color: #1b1b1b;
            font-weight: bold;
            .title.btn {
                font-size: 14px;
                color: #111111;
            }
        }
        }
        .send {
            width: 345px;
            height: 57px;
            border-bottom: 1px solid #eee;
            text-align: left;
            margin: 0 auto;
            display: flex;
            input {
                width: 18px;
                height: 18px;
                margin-top: 20px;
                margin-right: 10px;
            }
            span {
                display: block;
                font-size: 15px;
                color: #1b1b1b;
                font-weight: bold;
                margin-top: 18px;
            }
        }
        .item {
            width: 345px;
            margin: 0 auto;
            padding: 22.5px 0;
            border-bottom: 2px solid #eee;
            .item-title {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
                input {
                    width: 18px;
                    height: 18px;
                }
                span {
                    font-size: 14px;
                    text-decoration: underline;
                }
            }
            .item-msg {
                display: flex;
                margin-top: 20px;
                img {
                    width: 120px;
                    height: 120px;
                }
                .msg-info {
                    p {
                        color: #1b1b1b;
                        font-size: 13px;
                        text-align: left;
                        padding-left: 10px;
                    }
                    .type {
                        font-weight: bold;
                        line-height: 14px;
                        margin-top: 10px;
                    }
                    .color {
                        margin-top: 10px;
                    }
                    .size {
                        margin-top: 10px;
                    }
                    .tui {
                        color: #7d7d7d;
                        margin-top: 10px;
                    }
                    .price {
                        font-size: 16px;
                        color: #ff0000;
                        margin-top: 10px;
                    }
                    .operation {
                        width: 210px;
                        display: flex;
                        justify-content: space-between;
                     .opration-btn {
                          display: flex;
                        .reduce,.add {
                            width: 20px;
                            height: 32px;
                            line-height: 40px;
                        }
                        input {
                            width: 60px;
                            height: 32px;
                            text-align: center;
                            border:1px solid #eee;
                            margin: 0 7.5px;
                        }
                     }
                     .opration-del {
                         text-decoration: underline;
                         line-height: 32px;
                     }
                    }
                }
            }
        }
        .cart {
            position: fixed;
            width: 100%;
            height: 50px;
            bottom: 55px;
            display: flex;
            background: #fff;
            .checkall {
                width: 100px;
                display: flex;
                input {
                    width: 18px;
                    height: 18px;
                    margin-top: 15px;
                    margin-right: 10px;
                    margin-left: 15px;
                }
                span {
                    display: block;
                    line-height: 50px;
                }
            }
            .handle {
                display: flex;
                width: 275px;
                font-size: 13px;
                color: #7d7d7d;
                line-height: 50px;
                justify-content: space-between;
               p {
                    span {
                    font-size: 18px;
                    color: #1b1b1b;
                    font-weight: bold;
                    margin-right: 5px;
                }
                i{
                    font-style:normal;
                }
               }
                .btn {
                    width: 93px;
                    height: 50px;
                    color: #fff;
                    background: #ff0000;
                    text-align: center;
                    line-height: 50px;
                    // margin-left: 10px;
                }
            }
        }
    }
}
</style>